<template>
  <div ref='container' class='_glass-container'>
    <canvas ref='canvas' class='_canvas' id='canvas'></canvas>
    <div class='_block-title'><arrow-title><span slot='title'><slot name='title'></slot></span></arrow-title></div>
    <router-link class='_link' v-if='link !== ""' :to='link'><span class='_icon'></span>详情</router-link>
    <div class='_slot'><slot></slot></div>
  </div>
</template>

<script>
export default {
  name : 'glass-box',

  props : {
    cW : {
      type : Number,
      default : 300
    },

    link : {
      type : String,
      default : ''
    }
  },

  data () {
    return {
      W : 0,
      H : 0
    }
  },


  methods : {
    draw () {
        var cW = this.cW
        var containerEl = this.$refs.container
        var W = containerEl.clientWidth
        var H = containerEl.clientHeight

        this.W = W
        this.H = H

        var canvasEl = this.$refs.canvas
        canvasEl.width = W
        canvasEl.height = H

        const ctx = canvasEl.getContext('2d')

        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.strokeStyle = '#3d4a63'
        ctx.moveTo(2, 27)
        ctx.lineTo(2 + 27, 0 + 2)
        ctx.lineTo(2 + 27 + cW, 0 + 2)
        ctx.lineTo(2 + 27 + cW + 35, 37)
        ctx.lineTo(W - 32, 37)
        ctx.lineTo(W - 2, 63)
        ctx.lineTo(W - 2, H - 2)
        ctx.lineTo(0 + 2, H - 2)
        ctx.closePath()

        ctx.fillStyle = 'rgba(32, 41, 60, 0.3)'
        ctx.fill()
        ctx.stroke()

        ctx.beginPath()
        ctx.moveTo(2, 2)
        ctx.lineTo(2, 20)
        ctx.lineTo(22, 2)
        ctx.closePath()

        ctx.lineWidth = 2
        ctx.strokeStyle = '#a8c4ff'
        ctx.stroke()

        ctx.beginPath()
        ctx.moveTo(W - 2, 37)
        ctx.lineTo(W - 24, 37)
        ctx.lineTo(W - 2, 37 + 19)
        ctx.closePath()

        ctx.lineWidth = 2
        ctx.strokeStyle = '#a8c4ff'
        ctx.stroke()
    }
  },

  mounted () {
    this.draw()
  },

}
</script>

<style scoped lang='scss'>
  ._glass-container, ._canvas{
    height: 100%;
    width: 100%;
    position: relative;
  }

  ._block-title{
    position: absolute;
    top: 17px;
    left: 20px;
  }


  ._link{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18PX;
    color: #6e9cfd;
    padding-left: 110PX;
    ._icon{
      position: absolute;
      width: 98PX;
      height: 14PX;
      left: 0;
      top:50%;
      transform: translateY(-50%);
      @include background('link-pannel.png');
    }
  }

  ._slot{
    position: absolute;
    width: 100%;
    top: 37PX;
  }
</style>